<template>
  <div class="photoinfo-container">
      <h3>{{ photoinfo.title }}</h3>
      <p class="subtitle">
          <span>发表时间:{{ photoinfo.add_time | dateFormat }}</span>
          <span>点击：{{ photoinfo.click }}次</span>
      </p>
          <hr>

          <!-- 缩略图区域 -->
           
            <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
         
          
          <!-- 图片详情区域 -->
        <div class="content" v-html="photoinfo.content"></div>

        <!-- 放置一个评论的子组件 -->
        <cmt-box :id="id"></cmt-box>
  </div>
</template>

<script>
//  导入评论子组件 
import comment from '../subcomponents/comment.vue'

export default {
    data(){
        return {
            id: this.$route.params.id,  //从路由中获取到的图片ID
            photoinfo: {},
            slide1: [],  //保存所有获取的图片缩略图
        }
    },
    created(){
        this.getPhotoInfo()
        this.getThumbs()
    },
    methods:{
        getPhotoInfo(){
            // 获取图片的详情
            this.$http.get('api/getimageInfo/' + this.id).then( result => {
                if(result.body.status ===0 ){
                    this.photoinfo = result.body.message[0]
                  
                }
            })
        },
        getThumbs(){// 获取缩略图
        this.$http.get( 'api/getthumimages/' + this.id ).then( result => {
            if(result.body.status === 0){
                // 循环每个图片数据，补全每个图片的宽高
                result.body.message.forEach( item => {
                    item.w = 600
                    item.h = 400
                    item.msrc = item.src
                })
                // 把完整的数据保存到 list 中
                this.slide1 = result.body.message
            }
          })
        },
        handleClose(){}
    },
    components:{ //注册子组件
        'cmt-box':comment
    }
}
</script>

<style lang="scss">
    .photoinfo-container{
        padding: 5px;

        h3{
            color: #26a2ff;
            font-size: 15px;
            text-align: center;
            margin: 15px 0;
        }

        .subtitle{
            display: flex;
            justify-content: space-between;
        }

        .content{
            font-size: 13px;
        }
        .my-gallery{
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            figure{
                margin:3px;
            }
            img{
                width: 100px;
            }
        }
    }
</style>